<!-- 生成二维码 -->
<template>
  <view class="box">
    <view class="erweima">
      <!-- <image :src="qrCodeImg" alt="" class="qrCodeImgs" /> -->
      <canvas
        id="qrcode"
        canvas-id="qrcode"
        style="width: 150px; height: 150px"
      ></canvas>
    </view>
  </view>
</template>

<script>
// import QRCode from "qrcode";
// import UQRCode from 'uqrcodejs';
export default {
  props: {
    address: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      qrCodeImg: "",
    };
  },

  mounted() {
    this.createQRImage();
  },
  methods: {
    createQRImage() {
      if (this.address) {
        const UQRCode = require("uqrcodejs");
        // console.log(UQRCode,'UQRCode');
        // 获取uQRCode实例
        var qr = new UQRCode();
        // 设置二维码内容
        qr.data = this.address;
        // 设置二维码大小，必须与canvas设置的宽高一致
        qr.size = 150;
        // 调用制作二维码方法
        qr.make();
        // 获取canvas上下文
        var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
        // 设置uQRCode实例的canvas上下文
        qr.canvasContext = canvasContext;
        // 调用绘制方法将二维码图案绘制到canvas上
        qr.drawCanvas();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  .erweima {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 354rpx;
    height: 354rpx;
    border: 4rpx solid #ffffff;
    border-radius: 48rpx;
    .qrCodeImgs {
      width: 354rpx;
      height: 354rpx;
    }
    image {
      width: 100%;
      border-radius: 48rpx;
    }
  }
}
</style>
